<template>
  <div class="reportrank">
    <h2>{{titleName}}</h2>
    <el-radio-group class="kpiRadio" v-model="kpiType" size="small" @change="kpiTypeChange">
      <el-radio-button  v-for="item in kpislist" :key="item.key" :label="item.key">{{item.name}}</el-radio-button>
    </el-radio-group>
    <div class="rankwrap clear">  
      <div class="rankdiv">
        <div class="report_form">
          <div class="title dragmove clear">
            <h3>{{getKpiChinaName(kpiType)}}排行前十名</h3>
          </div>
          <div class="r_report_con">
            <div
              v-for="(item,key) in RankTop10"
              :key="item.index"
              class="r_con_row clear"
              :title="item.name"
            >
              <div class="r_con_row_title f_l row_w41" :class="key+1<4?'overflowint '+'top'+(key+1):''" ><span :class="key+1<4?'iconfont  icon-wangguan':''">{{(key>2)?key+1+'、':''}}</span>{{item.name}}</div>
              <div class="row_w58 f_l">
                <div class="r_ron_progress">
                  <div
                    class="r_progress_bar "
                    :style="{'width':item.value==0 && item.unit=='%'?'0%':((item.value-(RankTop10[RankTop10.length-1].value)*0.9)/(RankTop10[0].value- (RankTop10[RankTop10.length-1].value)*0.9 ))*100+'%'}"
                  >{{item.value}}</div>
                </div>
              </div>
              <div class="r_con_value"  :class="key+1<4?'top'+(key+1):''">
                   {{item.value+item.unit}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rankdiv">
        <div class="report_form">
          <div class="title dragmove clear">
            <h3>{{getKpiChinaName(kpiType)}}排行后十名</h3>
          </div>
          <div class="r_report_con">
            <div
              v-for="(item,key) in RankLast10"
              :key="item.index"
              class="r_con_row clear"
              :title="item.name"
            >
              <div class="r_con_row_title f_l row_w41" :class="key+1<4?'overflowint ':''">{{item.name}}</div>
              <div class="row_w58 f_l">
                <div class="r_ron_progress">
                  <div
                    class="r_progress_bar "
                    :style="{'width':item.value==0 && item.unit=='%'?'0%':((item.value-(RankLast10[0].value)*0.9)/(RankLast10[RankLast10.length-1].value- (RankLast10[0].value)*0.9 ))*100+'%'}"
                  >{{item.value}}
                  </div>
                </div>
              </div>
              <div class="r_con_value" :class="key+1<4?'top'+(key+1):''">
                {{item.value+item.unit}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.reportrank {
  width: 100%;
  min-height: 400px;
  background: #fff;
  padding: 35px 20px 20px 35px;
  overflow: hidden;
  > h2 {
    line-height: 1;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
    display: inline-block;
    margin-right: 20px;
  }
  .kpiRadio {
    display: inline-block;
    margin-top: -5px;
  }
  .rankwrap {
    width: 100%;
    padding:30px 10px  30px 10px;
    .rankdiv {
      float: left;
      min-height: 500px;
      width: 50%;
      padding: 0 30px;
      .report_form {
        font-family: "pingfangmedium", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 1;
        color: #555;
        height: 100%;
        width: 100%;
        background-color: #fff;
        font-size: 14px;
        overflow: initial;
        cursor: initial;
        -webkit-user-select: none; /* for Chrome */
        -moz-user-select: none; /* for Firefox */
        .dragmove {
          padding: 15px 0 9px 25px;
          line-height: 22px;
          position: relative;
          border-bottom: 1px solid #edf2fd;
          margin-bottom: 5px;
          h3 {
            color: #000;
            float: left;
            display: block;
            font-size: 22px;
            font-weight: 500;
            margin: 0;
          }
         
        }
        .r_report_con {
          position: relative;
          padding: 13px 49px 0 34px;
          text-align: center;
        }
        .r_con_row {
          margin-left: 0;
          margin-right: 0;
          height: auto;
          margin-bottom: 20px;
          position: relative;
          &::after,
          &::before {
            content: "";
            display: table;
            clear: both;
          }
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            .r_con_row_title {
              .iconfont{
                font-size: 26px;
                margin-right: 7px;  
              }
              font-weight: bold;
              font-size: 16px;
              line-height: 20px;
              height: 20px;
              color: #000;
            }
          }
          .r_con_row_title {
            position: relative;
            font-size: 14px;
            line-height: 38px;
            height: 28px;
            text-align: left;
            span {
              color: #000;
            }
          }
          .f_l {
            float: left;
          }
          .row_w41 {
            width: 39%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            
            height: 28px;
            &.overflowint{
              margin-left: -8px;
              line-height: 28px;
               height: 28px;
              &.top1{
                color: #f4be0d;
                span{
                  color: #f4be0d;
                  &::after{
                        content: '1';
                     }
                }
              }
              &.top2{
                  color:#4196ff;
                  span{
                     &::after{
                        content: '2';
                     }
                    color: #4196ff;
                }
              }
              &.top3{
                color: #c0ccdd;
                span{
                  &::after{
                        content: '3';
                     }
                  color: #c0ccdd;
                }
              } 
              
              span{
                text-align: center;
                position: relative;
                &::after{
                  content: '1';
                  font-size: 12px;
                  line-height: 26px;
                  display: inline-block;
                  color: #fff;
                  position: absolute;
                  left: 61%;
                  top: 69%;
                  transform: translate(-50%,-50%);
                }
              }
            }
          }
          .row_w58 {
            width: 58.33%;
            float: right;
            .r_ron_progress {
              margin-bottom: 0;
              margin-top: 9px;
              height: 20px;
              overflow: hidden;
              background-color: #edf1f7;
              -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
              .r_progress_bar {
                float: left;
                width: 0;
                font-size: 12px;
                height: 100%;
                line-height: 20px;
                transition: width 0.6s ease;
                text-align: center;
                color: #fff;
                background-size: 40px 40px;
                position: relative;
                background: -webkit-linear-gradient(
                  left,
                  #68b0fa,
                  #6b6fee
                ); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(
                  right,
                  #68b0fa,
                  #6b6fee
                ); /* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(
                  right,
                  #68b0fa,
                  #6b6fee
                ); /* Firefox 3.6 - 15 */
                background: linear-gradient(
                  to right,
                  #68b0fa,
                  #6b6fee
                ); /* 标准的语法（必须放在最后） */
                
                &::before {
                  content: "";
                  position: absolute;
                  display: block;
                  width: 0px;
                  height: 0px;
                  border: 20px solid transparent;
                  border-right: 10px solid #edf1f7;
                  right: 0;
                  top: 0;
                }
              }
            }
          }
          .r_con_value{
                position: absolute;
                left: 102%;
                line-height: 37px;
                white-space: nowrap;
                &.top1{
                color: #f4be0d;                
                }
                &.top2{
                    color:#4196ff;                    
                }
                &.top3{
                  color: #c0ccdd;                
                } 
          }
        }
      }
    }
  }
}
</style>

<script>
export default {
  props: {
    kpislist: {
      default() {
        return [];
      }
    },
    KPIType: "",
    RankTop10: {
      default() {
         return [
           {name: "缤谷广场店", value: "46145", unit: "人"},
           {name: "大族广场", value: "33583", unit: "人"},
           {name: "通州万达", value: "27238", unit: "人"},
           {name: "朝阳", value: "26637", unit: "人"},
           {name: "西单大悦城", value: "25016", unit: "人"},
           {name: "城乡世纪广场", value: "22777", unit: "人"},
           {name: "朝阳大悦城", value: "16958", unit: "人"},
           {name: "南通印象城", value: "14349", unit: "人"}
         ]
      }
    },
    RankLast10: {
      default() {
        return [
          {name: "南通印象城", value: "14349", unit: "人"},
            {name: "朝阳大悦城", value: "16958", unit: "人"},
            {name: "城乡世纪广场", value: "22777", unit: "人"},
            {name: "西单大悦城", value: "25016", unit: "人"},
            {name: "朝阳", value: "26637", unit: "人"},
            {name: "通州万达", value: "27238", unit: "人"},
            {name: "大族广场", value: "33583", unit: "人"},
            {name: "缤谷广场店", value: "46145", unit: "人"}
          ]
      }
    },
    titleName:''
  },
  data() {
    return {
      kpiType: ""
    };
  },
  mounted() {},
  watch: {
    KPIType(val) {
      this.kpiType = val;
      // console.log(this.kpiType);
    }
  },
  methods: {
    //指标改变事件
    kpiTypeChange(val) {
      //console.log(val);
      this.$emit("RankKpiTypeChange", val);
    },
    //得到指标中文名
    getKpiChinaName(key) {
      for(let i in this.kpislist) {
        if(this.kpislist[i].key==key)
          return  this.kpislist[i].name;
      }
    }
  }
};
</script>

